<template>
  <view class="policySettingMain">
    <view class="policySettingBox">
      <view class="policySettingOne">
        <u-cell-item
          icon="account-fill"
          title="团队名称"
          :value="nickName"
          :title-style="titleStyle"
          :value-style="valueStyle"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          icon="calendar"
          title="政策类型"
          :value="currentProductList > -1 ? productList.name : '请选择政策类型'"
          :title-style="titleStyle"
          :value-style="valueStyle"
          :arrow="true"
          :border-bottom="false"
          @click="showProductChoose"
        >
        </u-cell-item>
      </view>
      <view class="policySettingTwo">
        <!-- 费率设置 -->
        <view class="title flex align-center">
          <u-icon
            class="uIcon"
            name="setting-fill"
            color="#fb4535"
            size="40"
          ></u-icon>
          费率设置
        </view>
        <view class="twoBox">
          <view
            class="formItem solid-bottom flex align-center justify-between"
            v-for="(item, index) in feeOptions"
            :key="index"
          >
            <view class="left flex align-center">
              <view>{{ item.name }}</view>
              <view>{{ item.valueShow }}{{ item.unit }}</view>
            </view>
            <view class="right flex align-center">
              <input
                type="digit"
                :placeholder="item.max ? item.min + '~' + item.max : '0~0'"
                v-model="feeList[index]"
                maxlength="5"
              />
              <u-icon
                name="edit-pen-fill"
                color="#fb4535"
                size="32"
                style="margin-left: 8rpx"
              >
              </u-icon>
            </view>
          </view>
        </view>
        <view class="title flex align-center">
          <u-icon
            class="uIcon"
            name="rmb-circle-fill"
            color="#fb4535"
            size="40"
          ></u-icon>
          返现设置
        </view>
        <view class="twoBox">
          <view
            class="formItem solid-bottom flex align-center justify-between"
            v-for="(item, index) in cashOptions.active_reward"
            :key="index"
          >
            <view class="left flex align-center">
              <view class="flex align-center">{{ item.name }}</view>
              <view>{{ item.value }}{{ item.unit }}</view>
            </view>
            <view class="right flex align-center">
              <input
                type="digit"
                :placeholder="item.max ? item.min + '~' + item.max : '0~0'"
                v-model="cashList.active_reward[index].value"
                maxlength="5"
              />
              <u-icon
                name="edit-pen-fill"
                color="#fb4535"
                size="32"
                style="margin-left: 8rpx"
              >
              </u-icon>
            </view>
          </view>
        </view>
        <view class="title flex align-center">
          <u-icon
            class="uIcon"
            name="coupon-fill"
            color="#fb4535"
            size="40"
          ></u-icon>
          通讯服务费
        </view>
        <view class="twoBox">
          <view
            class="formItem solid-bottom flex align-center justify-between"
            v-if="Object.keys(cashOptionsService_data_fee).length !== 0"
          >
            <view class="left flex align-center">
              <view>{{ cashOptions.service_data_fee.name }}</view>
              <view
                >{{ cashOptions.service_data_fee.value
                }}{{ cashOptions.service_data_fee.unit }}</view
              >
            </view>
            <view class="right flex align-center">
              <input
                type="digit"
                :placeholder="
                  cashOptions.service_data_fee.max
                    ? cashOptions.service_data_fee.min +
                      '~' +
                      cashOptions.service_data_fee.max
                    : '0~0'
                "
                v-model="cashList.service_data_fee"
                maxlength="5"
              />
              <u-icon
                name="edit-pen-fill"
                color="#fb4535"
                size="32"
                style="margin-left: 8rpx"
              >
              </u-icon>
            </view>
          </view>
        </view>
        <u-button type="error" @click="submitRateTap">完成设置</u-button>
      </view>
    </view>

    <u-popup
      v-model="productShow"
      mode="bottom"
      height="50%"
      :mask-close-able="false"
    >
      <view class="agentViewMain">
        <view class="agentViewHeader solid-bottom">
          <view
            class="backView flex align-center justify-center"
            @click="productHideTap"
          >
            <u-icon name="arrow-left" color="#333" size="32"></u-icon>
          </view>
          <text>请选择产品类型</text>
        </view>
        <view class="agentViewBox">
          <view
            class="agentViewItem solid-bottom flex align-center justify-between"
            v-for="(item, index) in productList"
            :key="index"
            @click="selectProductTap(item, index)"
          >
            <view>{{ item.name }}</view>
            <view
              class="radioView"
              :class="currentProductList == index ? 'active' : ''"
            ></view>
          </view>
        </view>
        <view class="agentBtnView"
          ><button style="width: 100%" type="default" @click="productHideTap">
            确定
          </button>
        </view>
      </view>
    </u-popup>

    <u-modal
      v-model="show"
      :content="content"
      show-cancel-button
      @confirm="confirm"
      confirm-color="#fb4535"
    >
    </u-modal>
    <u-top-tips ref="uTips"></u-top-tips>
    <u-toast ref="uToast" />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headStyle: {
        height: "100rpx",
        "font-size:": "32rpx",
        "font-weight": "bold",
        "border-bottom": "2rpx solid #f1f1f1",
      },
      bodyStyle: {
        height: "auto",
      },
      titleStyle: {
        color: "#333333",
        fontSize: "28rpx",
      },
      valueStyle: {
        color: "#666666",
        fontSize: "28rpx",
      },

      show: false,
      content: "确认当前设置吗？",

      // 新增
      productShow: false,
      productList: [],
      nickName: "",
      userId: "",
      userType: "HJ",
      currentProductList: -1,
      policy_code: "",
      feeList: {},
      feeOptions: {},
      cashList: {},
      cashOptions: {},
      cashOptionsService_data_fee:{}
    };
  },
  onLoad(options) {
    this.nickName = options.nickName;
    this.userId = options.userId;
    this.userType = options.userType;
  },
  methods: {
    //政策设定提交
    submitRateTap() {
      if (this.productList.length <= 0) {
        this.$u.toast( "请选择政策类型")
        // this.$refs.uTips.show({
        //   title: "请选择政策类型",
        //   type: "info",
        //   duration: "1500",
        // });
        return;
      }
      //费率设置
      let feeList = this.feeList;
      let feeOptions = this.feeOptions;
      for (let i in feeList) {
        let name = feeOptions[i].name;
        if (feeList[i] == "") {
          this.$u.toast( "请输入" + name)
          // this.$refs.uTips.show({
          //   title: "请输入" + name,
          //   type: "info",
          //   duration: "1500",
          // });
          return;
        }
        let min = feeOptions[i].min;
        let max = feeOptions[i].max;
        let value = Number(feeList[i]);
        if (value < min || value > max) {
          this.$u.toast(name + "介于" + min + "~" + max)
          // this.$refs.uTips.show({
          //   title: name + "介于" + min + "~" + max,
          //   type: "info",
          //   duration: "1500",
          // });
          return;
        }
      }
      //返现设置
      let active_reward = this.cashList.active_reward;
      let active_reward_options = this.cashOptions.active_reward;
      for (let i = 0; i < active_reward.length; i++) {
        let name =`${active_reward_options[i].name}`;
        if (active_reward[i].value == "") {
          this.$u.toast("请输入" + name)
          // this.$refs.uTips.show({
          //   title: "请输入" + name,
          //   type: "info",
          //   duration: "1500",
          // });
          return;
        }
        let min = active_reward_options[i].min;
        let max = active_reward_options[i].max;
        let value = Number(active_reward[i].value);
        if (value < min || value > max) {
          this.$u.toast(name + "介于" + min + "~" + max)
          // this.$refs.uTips.show({
          //   title: name + "介于" + min + "~" + max,
          //   type: "info",
          //   duration: "1500",
          // });
          return;
        }
      }
      //通讯服务费
      let card_fee = this.cashList.service_data_fee;
      let card_fee_options = this.cashOptions.service_data_fee;
      let name = card_fee_options.name;
      if (card_fee == "") {
        this.$u.toast("请输入" + name)
        // this.$refs.uTips.show({
        //   title: "请输入" + name,
        //   type: "info",
        //   duration: "1500",
        // });
        return;
      }
      let min = card_fee_options.min;
      let max = card_fee_options.max;
      let value = Number(card_fee);
      if (value < min || value > max) {
        this.$u.toast(name + "介于" + min + "~" + max)
        // this.$refs.uTips.show({
        //   title: name + "介于" + min + "~" + max,
        //   type: "info",
        //   duration: "1500",
        // });
        return;
      }
      this.show = true;
    },

    confirm() {
      let params = {
        policy_code: this.policy_code,
        subId: this.userId,
        feeList: JSON.stringify(this.feeList),
        cashList: JSON.stringify(this.cashList),
      };
      this.$u.api
        .newSetUserPolicyFee(params)
        .then((res) => {
          if (res.status == 200) {
            this.$refs.uToast.show({
              title: res.msg,
              type: "success",
            });
            setTimeout(() => {
              this.$u.route({
                type: "navigateBack",
                delta: 1,
              });
            }, 2000);
          } else {
            this.$u.toast(res.msg)
            // this.$refs.uTips.show({
            //   title: res.msg,
            //   type: "info",
            //   duration: "2000",
            // });
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    //选择类
    selectProductTap(item, index) {
      this.currentProductList = index;
      this.productList.name = item.name;
      this.policy_code = item.policy_code;
      this.getProductFee();
    },

    showProductChoose() {
      this.currentProductList = -1;
      this.productShow = true;
      this.feeOptions = {};
      this.cashOptions.active_reward = [];
      this.cashOptions.service_data_fee = {};
      this.cashOptionsService_data_fee = {};
      this.getPolicy();
    },

    productHideTap() {
      this.productShow = false;
    },

    productHideButtonTap() {
      if (this.currentProductList == -1) {
        this.$refs.uToast.show({
          title: "请选择产品类型",
          type: "error",
        });
      } else {
        this.getProductFee();
        this.productShow = false;
      }
    },

    // 获取产品类型列表（getPolicyClass）
    getPolicy() {
      this.$u.api
        .newGetPolicyClass()
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.productList = datas;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    // 获取产品相关费率(getUserPolicyFee)
    getProductFee() {
      this.$u.api
        .newGetUserPolicyCfg({
          policy_code: this.policy_code,
          subId: this.userId,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.feeList = datas.feeCfg.feeList;
            this.feeOptions = datas.feeCfg.feeOptions;
            this.cashList = datas.cashCfg.cashList;
            this.cashOptions = datas.cashCfg.cashOptions;
            this.cashOptionsService_data_fee = datas.cashCfg.cashOptions.service_data_fee;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
              duration: "1400",
            });
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
}
.policySettingBox {
  .policySettingOne {
    background-color: #fff;
  }

  .tip {
    line-height: 80rpx;
    color: #f33;
    font-size: 28rpx;
    padding: 0 32rpx;
  }

  .policySettingTwo {
    padding: 0 32rpx 80rpx;
    .title {
      height: 80rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: $uni-text-color;
      background: #f1f1f1;
      padding: 0 20rpx;
      .uIcon {
        margin-right: 10rpx;
        position: relative;
        top: 2rpx;
      }
    }

    .twoBox {
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 10rpx;
      .formItem {
        height: 100rpx;
        padding: 0 30rpx;
        .left {
          view {
            display: block;
            font-size: 28rpx;
            color: $uni-text-color;
            margin-right: 28rpx;
            font-weight: bold;
            &:nth-of-type(1) {
              width: 240rpx;
            }

            &:nth-of-type(2) {
              position: relative;
            }
            text {
              font-size: 24rpx;
              margin-left: 10rpx;
            }
          }
        }

        .right {
          width: 35%;
          position: relative;
          top: 2rpx;
          text-align: end;
          input {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }
          > text {
            font-size: 36rpx;
            color: #333;
            font-weight: bold;
          }
        }
      }
    }

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;
      width: 100%;
      margin-top: 80rpx;

      &::after {
        border: none;
      }
    }
  }
}

.productViewMain {
  position: relative;
  .productViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }

    .comfirmView {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fb4535;
      padding: 0 30rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .productViewBox {
    padding: 80rpx 30rpx 0;

    .productViewItem {
      height: 100rpx;
    }
  }
}

.radioView {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;

  &.active {
    border-color: #fb4535;
    background-color: #fb4535;
    position: relative;

    &::before {
      content: "";
      display: block;
      width: 10rpx;
      height: 6rpx;
      background-color: #fff;
      transform: rotate(45deg);
      position: absolute;
      left: 6rpx;
      top: 18rpx;
    }

    &::after {
      content: "";
      display: block;
      width: 22rpx;
      height: 6rpx;
      background-color: #fff;
      transform: rotate(-45deg);
      position: absolute;
      left: 10rpx;
      top: 16rpx;
    }
  }
}

.agentViewMain {
  position: relative;

  .agentViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .agentViewSearch {
    padding: 20rpx 30rpx 0;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    left: 0;
    top: 80rpx;
    background-color: #fff;
    z-index: 9;
  }

  .agentViewBox {
    padding: 80rpx 30rpx 100rpx;

    .agentViewItem {
      height: 100rpx;
    }
  }

  .agentBtnView {
    padding: 20rpx 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;

      &::after {
        border: none;
      }
    }
  }
}

.gray {
  color: #ccc;
}
</style>
